<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="pagination(page)">
    <div class="row " th:if="${page.totalElements gt 0}" th:with="paginationSize=10">
        <div class="col-sm-5">
            第 <label th:text="${(page.number*page.size)+1}"></label> 到第 <label  th:text="${(page.number*page.size)+page.content.size()}"></label> 条, 共 <label th:text="${page.totalElements}"></label> 条, 每页
            <span class="btn-group dropup">
                <button type="button" class="btn btn-default  dropdown-toggle" data-toggle="dropdown">
                    <span class="page-size" th:text="${page.size}">5</span><span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="pageable-page-size" data-page-size="5"><a href="javascript:void(0)">5</a></li>
                    <li class="pageable-page-size" data-page-size="20"><a href="javascript:void(0)">20</a></li>
                    <li class="pageable-page-size" data-page-size="50"><a href="javascript:void(0)">50</a></li>
                    <li class="pageable-page-size" data-page-size="100"><a href="javascript:void(0)">100</a></li>
                </ul>
            </span>条
        </div>
        <div class="col-sm-7" th:with="current=${page.number+1}">
            <div class="dataTables_paginate paging_simple_numbers page-link-right-top pull-right" th:with="begin=${1 ge current - paginationSize/2}?1:${current - paginationSize/2}">
                <ul class="pagination" th:with="end=${begin + paginationSize - 1 le page.totalPages}?${begin + paginationSize - 1}:${page.totalPages}">
                    <li th:class="${page.isFirst()}?'disabled':''" th:classappend="${page.isFirst()}?'':'pageable-page-number'" th:data-page-number="0"><a href="javascript:void(0)">&laquo;</a></li>
                    <li class="pageable-page-number" th:each="i : ${#numbers.sequence(begin,end)}" th:classappend="${i==current}?'active':''" th:data-page-number="${i-1}"><a href="#" th:text="${i}">1</a></li>
                    <li th:class="${page.isLast()}?'disabled':''" th:classappend="${page.isLast()}?'':'pageable-page-number'" th:data-page-number="${page.totalPages-1}"><a href="javascript:void(0)">&raquo;</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>